<template>
	<view class="sleep-ing">
		<view class="p-row-20">
			<view class="now bold text-center m-b-25">{{now}}</view>
			<view class="text-center tip f-base flex-no-horizontal">
				将在 {{countDown}}
				<!-- <u-count-down @finish="alarmStart"
				:time="countDownStart * 1000"
				format="HH:mm:ss"></u-count-down> -->
				 后唤醒你
			</view>
		</view>

		<view class="music">
			<canvas id="myCanvas" canvas-id="myCanvas" @click="handlePlay"
			:style="{'width': canvas.w + 'px', 'height': canvas.h + 'px'}"></canvas>
		</view>
		<view class="p-row-20">
			<view class="btn text-center" v-show="type == 1">
				<view class="btn-reset"></view>
				<text class="f-base" style="position: relative;z-index: 1;">睡眠进行中，请保持手机屏幕在此界面</text>
			</view>
			<view class="btn text-center" v-show="type == 2">
				<view class="btn-reset"></view>
				<text class="f-base" style="position: relative;z-index: 1;">摇晃手机结束睡眠</text>
				<view class="btn-process" :style="{'width': shaKeCount * (100 / $store.state.sleepConfig.shaking_num) + '%'}"></view>
			</view>

			<view class="btn text-center"
				v-show="type == 2 && isAccelerometerFail"
				@touchstart="handletouchstart"
				@touchend="handletouchend">
				<view class="btn-reset"></view>
				<text class="f-base" style="position: relative;z-index: 1;">长按结束睡眠</text>
				<view class="btn-process" :style="{'width': touchTime * (100 / $store.state.sleepConfig.gravity_sensor) + '%'}"></view>
			</view>
			<view class="over flex-no-horizontal" v-show="type == 1">
				<u-icon name="info-circle" color="#C2E0E6" size="14" class="m-r-5"></u-icon>
				<text class="f-base white" @click="isShowTip = true">提前结束</text>
			</view>
		</view>
		<u-popup :show="isShowTip" @close="isShowTip = false"
		overlayOpacity="0.8" safeAreaInsetBottom mode="center"
		round="25" bgColor="#1A2533" closeIconPos="top-left">
			<view class="sleep-tip">
				<u--image src="https://cdn3.relaverse.cn/appfile/sleep-ing-tip.png"
				width="30" height="30" shape="circle" class="m-b-20 sleep-tip-icon"></u--image>
				<view class="text-center white f-base m-b-20">确定要提前结束睡眠吗?</view>
				<view class="flex-no-horizontal between">
					<u-button color="rgba(227, 231, 255, 0.2)"
					@click="aheadFinish"
					shape="circle" class="sleep-tip-button">
						<text class="bold f-base">确认</text>
					</u-button>
					<u-button shape="circle" class="sleep-tip-button"
					@click="isShowTip = false"
					color="linear-gradient(0deg, #00B0C0 0%, #00CBB1 100%)">
						<text class="bold f-base">继续睡</text>
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getPoint,drawPoint} from '../../utility/canvas.js'
	import {acceleration,decibel,startSleep as startSleepApi,endSleep} from '../../api/sleep.js'
	const KJAudio = uni.requireNativePlugin('KJ-Audio');
	const SHAKE_THRESHOLD = 800
	export default {
		data() {
			return {
				now: '00:00',
				getTimeTimer: null,
				timer: null,
				canvas: {w:330, h:330},
				ctx: null,
				r1: 104,
				r2: 129,
				r3: 154,
				ball1: null,
				angle1: 150,
				ball2: null,
				angle2: 236,
				isPlay: false,
				target: {
					x: 145, y: 145, w: 40, h: 40,
				},
				audioContext: null,
				isShowTip: false,
				shaKeCount: 0,

				countDownStart: 0,
				type: 1, // 1.sleep 2.getUp
				isAccelerometerFail: false,

				gArray: [],
				decibelArray: [],
				sendTimer: null,

				isEnd: false,

				touchTime: 0,
				touchTimer: null,

				last: null,
				speed: 0,

				alarmTimer: null,
				wakeupStamp: null,
				countDown: '00:00:00',
				countDownTimer: null,
				leaveTimer: null,

			}
		},
		computed: {
			iconSrc() {
				return this.isPlay ? 'https://cdn3.relaverse.cn/appfile/pause-white.png' : 'https://cdn3.relaverse.cn/appfile/play-white.png'
			},
			choseGuide() {
				return this.$store.state.sleepData.guide_state ? this.$store.state.sleepData.checked_guide : null
			},
			choseAlarm() {
				return this.$store.state.sleepData.music_state ? this.$store.state.sleepData.checked_music : null
			},
			sleepData() {
				return this.$store.state.sleepData
			}
		},
		onLoad() {
			const now = new Date()
			const seconds = (now.getHours() * 60 + now.getMinutes()) * 60 + now.getSeconds()
			const getUpMintues = (Number(this.sleepData.getUp.split(":")[0] * 60) + Number(this.sleepData.getUp.split(":")[1])) * 60
			const sleepMintues = (Number(this.sleepData.sleep.split(":")[0] * 60) + Number(this.sleepData.sleep.split(":")[1])) * 60
			if (seconds >= getUpMintues) {
				this.countDownStart = this.sleepData.sumMintues * 60 - (seconds - sleepMintues)
			} else {
				this.countDownStart = getUpMintues - seconds
			}
			// if (uni.getSystemInfoSync().osName == 'ios') {
				// console.log(this.countDownStart)
				// this.alarmTimer = setTimeout(() => {
					// 	console.log('应该执行了')
					// 	this.alarmStart()
					// }, 1000 * this.countDownStart)
				// })
			// }
			this.wakeupStamp = now.getTime() + this.countDownStart * 1000
			this.startSleep()
		},
		async onReady() {
			// 音乐播放表盘
			this.ctx = uni.createCanvasContext('myCanvas')
			this.timer = setInterval(this.initCanvas,200)
			if (this.choseGuide) {
				this.audioContext = uni.createInnerAudioContext()
				this.audioContext.src = this.choseGuide.source
				this.audioContext.autoplay = true
				this.startPlay()
			}
			// #ifdef APP-PLUS
			this.getG()
			this.startRecorder()
			this.sendData()

			// 单页禁止测滑返回,ios有效
		    let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
		    currentWebview.setStyle({ popGesture: 'none' })

			// #endif
		},
		onShow() {
			this.getTime()
			if (this.wakeupStamp) {
				this.getCountdown()
			}
			if (this.ctx) {
				this.timer = setInterval(this.initCanvas,200)
			}

			clearTimeout(this.leaveTimer)
			this.leaveTimer = null
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
			clearInterval(this.getTimeTimer)
			this.getTimeTimer = null
			clearInterval(this.countDownTimer)
			this.countDownTimer = null
			// 用来在ios上判断是否锁屏
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == 'ios') {
				uni.getScreenBrightness({
					success: (res) => {
						console.log(res)
						if (res.value != 0) {
							this.handleLeaveTip()
						}
					}
				});
			}
			// 安卓用来监听是否锁屏
			if (uni.getSystemInfoSync().platform == 'android') {
				const pm2 = plus.android.runtimeMainActivity().getSystemService(plus.android.android.content.Context.POWER_SERVICE);
				console.log(plus.android.invoke(pm2, 'isScreenOn')?'切换应用':'锁屏')
				if (plus.android.invoke(pm2, 'isScreenOn')) {
					this.handleLeaveTip()
				}
			}
			// #endif
		},
		onBackPress() {
			// 仅安卓有效，阻止侧滑
			return true
		},
		onUnload() {
			clearInterval(this.timer)
			clearInterval(this.sendTimer)
			clearTimeout(this.alarmTimer)
			this.cancelShake()
		},
		methods: {
			// 离开app提醒
			handleLeaveTip() {
				this.leaveTimer = setTimeout(() =>{
					plus.push.createMessage('睡眠提前结束提醒',
					'您已经离开睡眠页面2分钟，已为您提前结束睡眠',
					)
					this.aheadFinish()
				},120 * 1000)
			},
			//长按开始
			handletouchstart() {
				console.log('长按开始')
				this.touchTimer = setInterval(() =>{
					this.touchTime++
					if (this.touchTime > this.$store.state.sleepConfig.gravity_sensor) {
						clearInterval(this.touchTimer)
						console.log('完成')
						this.toFinish()
					}
				}, 1000)
			},
			//长按结束
			handletouchend() {
				console.log('长按结束')
				clearInterval(this.touchTimer)
				this.touchTimer = null
				if (this.touchTime < this.$store.state.sleepConfig.gravity_sensor) {
					this.touchTime = 0
				}
			},
			//开始睡眠
			async startSleep() {
				// if (uni.getStorageSync('sleepId')) return
				try{
					const res = await startSleepApi()
					this.sleepId = res.data.sleep_id
					uni.setStorageSync('sleepId', res.data.sleep_id)
				}catch(e){
					if (e.data && e.data.sleep_id) {
						uni.setStorageSync('sleepId', e.data.sleep_id)
					}
					//TODO handle the exception
				}
			},
			// 得到重力加速度
			getG() {
				uni.startAccelerometer({
					fail: (res) => {
						console.log('加速度传感出错：', res)
						this.isAccelerometerFail = true
					}
				})
				uni.onAccelerometerChange(this.addG)
			},
			addG(res) {
				this.gArray.push(res)
			},
			sendData() {
				this.sendTimer = setInterval(() =>{
					this.sendAcceleration()
					this.sendDecibel()
				}, 1000 * 60 * 10)
			},
			async sendAcceleration() {
				try{
					await acceleration({
						time: new Date().getTime(),
						data: this.gArray
					})
					this.gArray = []
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			async sendDecibel() {
				try{
					if (uni.getSystemInfoSync().osName == 'android') {
						this.stopRecorder()
					}
					await decibel({
						time: new Date().getTime(),
						data: this.decibelArray
					})
					this.decibelArray = []
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			alarmStart() {
				if (this.type == 2) return
				this.type = 2
				this.shake()
				if (!this.choseAlarm) return
				this.audioContext = uni.createInnerAudioContext()
				this.audioContext.src = this.choseAlarm.source
				this.audioContext.loop = true
				this.startPlay()
			},
			shake() {
				if (this.shaKeCount > this.$store.state.sleepConfig.shaking_num) return
				this.last = {x: 0, y: 0, z: 0}
				uni.onAccelerometerChange(this.getShakeCount)
			},
			getShakeCount(res) {
				this.speed = Math.abs((res.x + res.y + res.z - this.last.x - this.last.y - this.last.z) / 200 * 8000)
				if (this.speed > SHAKE_THRESHOLD && this.shaKeCount <= this.$store.state.sleepConfig.shaking_num) {
					this.shaKeCount++
				}
				if (this.shaKeCount >= this.$store.state.sleepConfig.shaking_num) {
					this.cancelShake()
					this.toFinish()
				}
				this.last  = res
			},
			cancelShake() {
				uni.offAccelerometerChange(this.addG)
				uni.offAccelerometerChange(this.getShakeCount)
			},
			startPlay() {
				this.audioContext.play()
				this.isPlay = true
				this.audioContext.onEnded(() => {
					this.isPlay = false
				})
				this.audioContext.onError((res) =>{
					console.log(res)
					uni.showToast({
						title: res.errMsg,
						icon: 'none'
					})
				})
			},
			handlePlay(e) {
				if ((this.type == 1 && !this.choseGuide) || (this.type == 2 && !this.choseAlarm)) return
				const x = e.target.x - e.target.offsetLeft
				const y = e.target.y - e.target.offsetTop
				if (this.target.x < x && (this.target.x + this.target.w) > x && this.target.y < y && (this.target.y + this.target.y + this.target.h) > y) {
					this.isPlay = !this.isPlay
					this.initCanvas()
					this.isPlay ? this.audioContext.play() : this.audioContext.pause()
				}
			},
			initCanvas() {
				this.ctx.clearRect(0,0,this.canvas.w,this.canvas.h)
				this.drawCircle(this.canvas.w/2,this.canvas.h/2,this.r1,'rgba(0,0,0,0.4)','https://cdn3.relaverse.cn/appfile/sleep-cover.png')
				this.drawArc()

				this.ball1 = this.getPos( this.canvas.w/2,this.canvas.h/2 - this.r2,this.angle1,this.r2)
				const r = 7
				const grd = this.ctx.createLinearGradient(this.ball1.x,this.ball1.y,this.ball1.x + r,this.ball1.y + r)
				grd.addColorStop(0, '#005774')
				grd.addColorStop(1, '#428178')
				this.drawRing(this.canvas.w/2,this.canvas.h/2,this.r2,'rgba(0, 38, 47, 1)',2)
				this.drawCircle(this.ball1.x,this.ball1.y,r,grd)
				this.angle1++

				const r2 = 10
				this.ball2 = this.getPos(this.canvas.w/2,this.canvas.h/2 - this.r3,this.angle2,this.r3)
				const grd2 = this.ctx.createLinearGradient(this.ball2.x,this.ball2.y,this.ball2.x + r2,this.ball2.y + r2)
				grd2.addColorStop(0, '#005774')
				grd2.addColorStop(1, '#428178')
				this.drawRing(this.canvas.w/2,this.canvas.h/2,this.r3,'rgba(0, 38, 47, 1)',2)
				this.drawCircle(this.ball2.x,this.ball2.y,r2,grd2)
				this.angle2--


				if (this.type == 1 && this.choseGuide) {
					this.drawMusicBtn(this.choseGuide.name)
				}

				if (this.type == 2 && this.choseAlarm) {
					this.drawMusicBtn(this.choseAlarm.name)
				}

				this.ctx.draw()
			},
			drawMusicBtn(text) {
				this.ctx.save()
				this.ctx.translate(this.canvas.w/2,this.canvas.h/2)
				const r3 = 20
				this.drawCircle(0,0,r3,'rgba(0,0,0,0.5)')
				this.ctx.drawImage(this.iconSrc,-r3 * 0.5 ,-r3 * 0.5 ,20,20)
				this.ctx.setFontSize(14)
				this.ctx.textAlign = 'center'
				this.ctx.textBaseline = 'middle'
				this.ctx.fillStyle = '#C2E0E6'
				this.ctx.fillText(text,0,40)
				this.ctx.restore()
			},
			getPos(startX,startY,angle,r) {
				const endX = startX + r * Math.sin(angle / 180 * Math.PI)
				const endY = startY + (r - r * Math.cos(angle / 180 * Math.PI))
				return {
					x: endX,
					y: endY,
				}
			},
			drawCircle(x,y,r,bgColor = 'black',bgImage,lineWidth = 1) {
				this.ctx.save()
				this.ctx.beginPath()
				this.ctx.arc(x,y,r,0,2*Math.PI)
				this.ctx.clip()
				if (bgImage) {
					this.ctx.fillStyle = 'transparent'
					this.ctx.drawImage(bgImage,this.canvas.w/2-r,this.canvas.h/2-r,r * 2,r * 2)
				}
				this.ctx.fillStyle = bgColor
				this.ctx.fill()
				this.ctx.restore()
			},
			drawRing(x,y,r,color,lineWidth = 1) {
				this.ctx.save()
				this.ctx.beginPath()
				this.ctx.arc(x,y,r,0,2*Math.PI)
				this.ctx.setStrokeStyle(color)
				this.ctx.lineWidth = lineWidth
				this.ctx.stroke()
				this.ctx.restore()
			},
			drawArc() {
				const sleepData = uni.getStorageSync('sleep')
				if (!sleepData) return
				const sleepTime =  sleepData.sleep
				const getUpTime = sleepData.getUp
				if (!sleepTime || !getUpTime) return
				const iconR = 8 // icon的半径
				const R = this.r1 + 2
				const startPoint = {x:this.canvas.w / 2, y: this.canvas.h/2 - R}
				const sleepPoint = getPoint(sleepTime,startPoint.x,startPoint.y,R,24)
				const getUpPoint = getPoint(getUpTime,startPoint.x,startPoint.y,R,24)
				this.ctx.save()
				this.ctx.translate(this.canvas.w/2,this.canvas.h/2)
				this.ctx.beginPath()
				this.ctx.arc(0,0,R,sleepPoint.rad,getUpPoint.rad)
				this.ctx.lineWidth = 5
				const grd = this.ctx.createLinearGradient(sleepPoint.x,sleepPoint.y,getUpPoint.x,getUpPoint.y)
				grd.addColorStop(0, '#00C897')
				grd.addColorStop(1, '#00ABCA')
				this.ctx.setStrokeStyle(grd)
				this.ctx.stroke()
				this.ctx.restore()

				drawPoint(this.ctx,sleepPoint.x,sleepPoint.y, iconR,'transparent','https://cdn3.relaverse.cn/appfile/sleep-sleep-time.png')
				drawPoint(this.ctx,getUpPoint.x,getUpPoint.y, iconR,'transparent','https://cdn3.relaverse.cn/appfile/sleep-getup-time.png')
			},
			getTime() {
				this.getTimeTimer = setInterval(() =>{
					const now = new Date()
					const hour = now.getHours()
					const minutes = now.getMinutes()
					this.now = `${hour < 10 ? '0' + hour : hour} : ${minutes < 10 ? '0' + minutes : minutes}`
				},1000)
			},
			getCountdown() {
				this.countDownTimer = setInterval(() => {
					const now = new Date().getTime()
					const duration = this.wakeupStamp - now
					if (duration < 0) {
						clearInterval(this.countDownTimer)
						this.countDownTimer = null
						this.countDown = '00:00:00'
					} else {
						const duration = (this.wakeupStamp - now) / 1000
						const h = parseInt(duration / 60 / 60 % 24)
						const m = parseInt(duration / 60 % 60)
						const s = parseInt(duration % 60)
						this.countDown = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`
					}
				}, 1000)
			},
			aheadFinish() {
				uni.setStorageSync('aheadFinish', true)
				this.toFinish()
			},
			toFinish() {
				this.isEnd = true
				// #ifdef APP-PLUS
				this.stopRecorder()
				// #endif
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.destroy()
				}
				this.cancelShake()
				clearInterval(this.timer)
				clearInterval(this.sendTimer)
				clearInterval(this.getTimeTimer)
				clearTimeout(this.alarmTimer)
				clearInterval(this.countDownTimer)
				this.timer = null
				this.sendTimer = null
				this.getTimeTimer = null
				this.wakeupStamp = null
				this.alarmTimer = null
				this.countDownTimer = null
				this.ctx = null
				this.audioContext = null
				this.gArray = []
				this.decibelArray = []
				this.type = 1
				this.shaKeCount = 0
				uni.redirectTo({
					url: './finish?sleepId=' + uni.getStorageSync('sleepId')
				})
			},

			// 唤起麦克风
			startRecorder() {
			    var dic = {
			        "filePath": plus.io.convertLocalFileSystemURL("_doc/KJ-Audio"), //保存缩略图的路径，必须传_doc下的本地绝对路径
			        "format": "aac", //音频格式，有效值 aac/wav
			        "sampleRate": 44100, //采样率，有效值 8000/16000/44100
			        "numberOfChannels": 2, //录音通道数，有效值 1/2
			        "encodeBitRate": 16000, //ios才支持 编码码率
			        "linearPCMBitDepthKey": 16, //ios才支持 线性采样位数 有效值 8, 16, 24, 32
			        "encoderAudioQuality": "High", //ios才支持 音频质量,采样质量 有效值 Min Low Medium High Max
			        "isService": true, //android才支持，是否开启后台服务，在后台和熄屏都可以录音
			        "notificationID": "KJ-Audio10", //android8才支持，通知ID
			        "notificationName": "主服务", //android8才支持，通知名
			        "notificationTitle": "录音服务", //android才支持，通知标题
			        "notificationText": "运行中...", //android才支持，通知内容
			        "isSetNotificationVibrate": false, //android才支持，是否设置震动，由于android机制，通知设置过了，就不能再修改，如果要修改，要先修改notificationID
			        "isRequestPermissions": true, //android才支持，是否申请RECORD_AUDIO权限
					"isService": true
				}
				console.log('开始监听麦克风')
				const now = new Date().getTime()
				const remind = this.wakeupStamp - now
				if (uni.getSystemInfoSync().osName == 'android' && remind <= 10 * 60 * 1000 && !this.alarmTimer) {
					console.log('倒计时启动')
					this.alarmTimer = setTimeout(() => {
						this.alarmStart()
					}, remind)
				}
			    KJAudio.start(dic, (res) => {
			        if (res.result && res.error == "systemStop") {
			            //ios 通话的时候，系统会自动停止，andorid，不受影响，只是不能录制，电话挂了之后，会继续录音
			            console.log("总时长: " + res.duration); //单位秒
			            console.log("stop: " + JSON.stringify(res));
			        }
					this.decibelArray.push(parseInt(res.decibel))
					if (uni.getSystemInfoSync().osName == 'ios') {
						console.log("start: " + JSON.stringify(res));
						console.log(this.countDownStart - res.currentTime)
						if (this.countDownStart - res.currentTime <= 0) {
							this.alarmStart()
						}
					}
				});
			},
			// 停止调用麦克风
			stopRecorder() {
				const vm = this
				KJAudio.stop((res) => {
					// console.log("总时长: " + res.duration); //单位秒
					// console.log("stop: " + JSON.stringify(res));

					const dirPath = '_doc/KJ-Audio'
					plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {
						//读取这个目录对象
						var directoryReader = entry.createReader();
						//读取这个目录下的所有文件
						directoryReader.readEntries(function(entries) {
							//如果有才操作
							if (entries.length > 0) {
								//删除目录将会删除其下的所有文件及子目录 不能删除根目录，如果操作删除根目录
								//将会删除目录下的文件及子目录，不会删除根目录自身。 删除目录成功通过succesCB
								//回调返回，失败则通过errorCB返回。
								entry.removeRecursively(function(entry) {
									if (!vm.isEnd) {
										vm.startRecorder()
									}
								}, function(e) {
									console.log(e.message + ' ?!');
								})
							}
						}, function(e) {
							console.log('读取文件失败：' + e.message)
						})
					}, function(e) {
						console.log('读取目录失败：' + e.message)
					})
				},function(err){
					console.log(err)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.sleep-ing {
		height: 100vh;
		background: url('https://cdn3.relaverse.cn/appfile/sleep-bg.jpg') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 140rpx 0 50rpx;
		position: relative;
		.white{
			color: #C2E0E6;
		}
		.now {
			color: #C2E0E6;
			font-size: 45px;
		}

		.tip {
			opacity: 0.5;
			color: #C2E0E6;
			margin-bottom: 100rpx;
			justify-content: center;
		}
		.music{
			margin-bottom: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn{
			height: 113rpx;
			line-height: 113rpx;
			border-radius: 64rpx;
			overflow: hidden;
			position: relative;
			color: #C2E0E6;
			// background-color: rgba(194,224,230,0.1);
			// background: url('https://cdn3.relaverse.cn/appfile/sleep-bg.jpg') no-repeat;
			// background-size: contain;
			// background-attachment: fixed;
			.btn-reset{
				background-color: rgba(194,224,230,0.1);
				filter: blur(5px);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}
			.btn-process{
				background: linear-gradient(0deg, #00B0C0 0%, #00CBB1 100%);
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 0;
				border-radius: 32px;
				z-index: 2;
			}
		}

		.over{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 100rpx;
			justify-content: center;
		}

		.sleep-tip{
			width: 590rpx;
			box-sizing: border-box;
			padding: 52rpx 55rpx 45rpx;
			background: url(https://cdn3.relaverse.cn/appfile/sleep-not-enough.png) no-repeat;
			background-size: 100% 100%;
			border-radius: 30rpx;
			.sleep-tip-icon{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.sleep-tip-button{
				width: 43%;
			}
		}
	}
	.sleep-ing ::v-deep {
		.u-count-down__text{
			color: #C2E0E6;
			font-size: 14px;
			margin: 0 10rpx;
		}
	}
</style>
